<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <title>我的卡券</title>
    <link rel="stylesheet" href="__STATIC_URL__/static/mobile/css/weui.css"/>
    <link rel="stylesheet" href="__STATIC_URL__/static/mobile/mycord/css/cord.css" />
    <style>
        body{
            background:#0BB20C;
        }
        .container{
            background:#fff;
            margin:10px;
            border-radius: 5px;
        }
        .top{
            height: 260px;
            padding: 20px;

        }
        .shopLogo {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            float: left;
            margin:0 10px;
        }
        .name{
            float: left;
            height: 36px;
            line-height: 36px;
            font-size: 14px;
            float: left;
            color:#545454;
        }
        .title{
            font-size: 30px;
            text-align: center;
            font-weight: 500;
            padding: 20px 0;
        }
        .pic{
            font-size:16px;
            padding-top:10px;
        }
        .body{
            margin-bottom: 20px;
            border-top: 2px dashed #aaa;
            padding:20px;
            color:#0d0d0d;
            font-size:14px;
            position: relative;
        }
        .btn{
            margin-top:20px;
        }
        .weui-flex{
            font-weight:300;
        }
        .weui-flex__item{
            padding-left:5px;
            color:#9e9e9e;
        }
        .semi_circle {
            width: 10px;
            height: 20px;
            background-color: #0bb20c;
            border-radius: 0 20px 20px 0;
            position: absolute;
            top: -12px;
            left: -2px;
        }
        .semi_circle1 {
            width: 10px;
            height: 20px;
            background-color: #0bb20c;
            border-radius: 20px 0 0 20px;
            position: absolute;
            top: -11px;
            left: 98%;
        }
    </style>
</head>
<body>

<div class="container" id="container">

    <div class="top">
        <div class="header">
            <img src='__STATIC_URL__/static/mobile/mycord/img/timg.jpg' mode='aspectFill' class='shopLogo'/>
            <p class="name">悟能科技</p>
            <div style="clear:both;"></div>
        </div>
        <div class="title">
            剪发次卡
            <p class="pic">100元10次</p>
        </div>
        <div class="btn">
            <buton class="weui-btn weui-btn_primary ">立即支付</buton>
        </div>
    </div>

    <!-- <div class="hfooter">
        <div class="hfr">发现新大陆</div>
        <div class="arrow"></div>
    </div>-->

    <div class="body">
        <div class="semi_circle"></div>
        <div class="semi_circle1"></div>
        <div class="weui-flex">
            <div>使用说明:</div>
            <div class="weui-flex__item">仅可用作充值使用;有效期内使用</div>
        </div>
        <div class="weui-flex">
            <div>可用时间:</div>
            <div class="weui-flex__item">2018.01.11-2018-12.15</div>
        </div>

    </div>

</div>
</body>
<script src="__STATIC_URL__/static/jquery/3.2.1/jquery.min.js"></script>
<script src="https://res.wx.qq.com/open/libs/weuijs/1.0.0/weui.min.js"></script>
<script src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
<script>
    /* $(function(){

      $('.default').on('click', function(){
             var id = $(this).data('id');
             $(this).addClass("red").siblings().removeClass("red");
             $("."+id).attr("style","display:block").siblings().attr("style","display:none");
         });

     });*/
    $("#Refresh").click(function(){
        window.location.reload();
    })
</script>
<script type="text/javascript">
    $(function () {
//        console.log(window.location.pathname/window.location.protocol/window.location.host);

        $(".clickself").click(function () {

        })
    });
</script>
</html>
